<template>
    <div class="category_layout">
        <div class="title"><b>{{ title }}</b></div>
        <el-button size="small" type="primary" @click="$emit('add', item)" v-if="modifyMode">添加分类</el-button>
        <el-input class="search" v-model="searchName" placeholder="查找分类" clearable />
        <ul class="category_list">
            <li v-for="(item, index) in showData" :key="index" :class="{ active: item.code == activeCode }"
                @click="switchCategory(item)">
                <span>{{ item.name }}</span>
                <el-popover v-if="item.name != '全部' && modifyMode" placement="bottom" :width="100">
                    <div class="operation_layout">
                        <span>分类操作</span>
                        <div>
                            <el-button class="r_m_10" size="small" @click="$emit('modify', item)">编辑</el-button>
                            <el-button size="small" @click="$emit('del', item)">删除</el-button>
                        </div>
                    </div>
                    <template #reference>
                        <el-icon class="operation_icon" :size="16">
                            <Operation />
                        </el-icon>
                    </template>
                </el-popover>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch, computed } from "vue";
import useRoute from "@util/router";
import useAccoutStore from "@store/accout"

const accoutStore = useAccoutStore()
const route = useRoute();
defineEmits(['modify', 'del', 'add', 'change'])
const props = defineProps(['title', 'data'])

const searchName = ref('')
const showData = ref(props.data)
const activeCode = ref(route.query().c || props.data[0].code)

const modifyMode = computed(() => {
    return accoutStore.userInfo.mainStore
})

watch(() => searchName.value, val => {
    search(val)
})
watch(() => props.data, val => {
    showData.value = val
    if (val.find((e) => { return e.code == activeCode.value }) == null) {
        activeCode.value = 'all'
    }
})

function search(key) {
    if (key != null && key.length > 0) {
        let result = []
        for (let item of props.data) {
            if (item.name.length > 0 && item.name.includes(key)) {
                result.push(item)
            }
        }
        showData.value = result
    } else {
        showData.value = props.data
    }
}

function switchCategory(data) {
    if (data.code != activeCode.value) {
        activeCode.value = data.code
        route.replaceQuery('c', data.code)
    }
}


</script>
<style lang="scss">
.category_layout {
    text-align: center;
    border-right: solid 1px var(--el-menu-border-color);
    height: 100%;

    .search {
        margin: 10px 0;
        width: 130px;
    }
}

.title {
    width: 100%;
    text-align: center;
    padding: 15px 0;
    border-bottom: 1px solid $border;
    margin-bottom: 15px;
}

.category_list {
    margin-top: 10px;
    list-style-type: none;

    li {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        cursor: pointer;

        &:hover {
            background: #fafafa;

            span {
                color: $primary;
            }

        }

        .operation_icon {
            color: #6f6f6f;
        }
    }

    .active {
        color: $primary;
    }
}

.operation_layout {
    display: flex;
    flex-direction: column;

    div {
        margin-top: 8px;
    }

    .r_m_10 {
        margin-right: 10px;
    }
}
</style>